<template>
  <div class="image-item">
    <div v-if="imageList.list" class="item">
      <div v-if="imageList.list.length > 0" class="item-wrap">
        <div v-for="item in imageList.list" :key="item.id" class="image-wrap">
          <div class="image">
            <img v-imgerror="defaultImg" :src="item.url" style="width: 100%; height: 150px; object-fit: cover;">
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="btn-wrap">
            <el-button type="text" @click="updateImgBtn(item)">重命名</el-button>
            <template>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                title="是否要删除该图片？"
                @confirm="deleteImage(item.id)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>

          </div>
        </div>
      </div>
      <el-empty v-else description="暂无图片" />
      <div class="footer">
        <el-pagination background layout="prev, pager, next" :total="imageTotalCount" @current-change="changePage" />
      </div>
    </div>
    <!-- 图片名弹层 -->
    <UpdateImgDialog :dialog-show.sync="dialogShow" :form-data="formData" @updateImgName="updateImgNameFn" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { deleteImage } from '@/api/image'
import UpdateImgDialog from './update-img-dialog.vue'
export default {
  name: 'ImageItem',
  components: {
    UpdateImgDialog
  },
  data() {
    return {
      defaultImg: require('@/assets/images/bard.jpeg'),
      imageParams: {
        id: '',
        page: 1,
        limit: 8
      },
      dialogShow: false, // 控制修改图片名弹层
      formData: {}
    }
  },
  computed: {
    ...mapGetters(['imageList', 'imageTotalCount'])
  },
  watch: {
    imageList: {
      handler(val) {
        this.imageParams.id = val.id
      }
    }
  },
  methods: {
    ...mapActions(['image/getImageList']),
    async getImageList() {
      await this['image/getImageList'](this.imageParams)
    },
    changePage(page) {
      this.imageParams.page = page
      this.getImageList()
    },
    // 删除图片
    async deleteImage(ids) {
      try {
        await deleteImage([ids])
        this.getImageList()
        this.$message.success('删除图片成功')
      } catch (error) {
        console.log(error)
        this.$message.error('删除图片失败')
      }
    },
    // 修改图片名
    updateImgBtn(data) {
      this.dialogShow = true
      this.formData = data
    },
    updateImgNameFn(name) {
      this.formData.name = name
      this.getImageList()
    }
  }
}
</script>

<style lang="scss" scoped>
.image-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .item {
    position: relative;
    height: 100%;
    width: 100%;

    .item-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 30px 10px 0 10px;

      .image-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 24%;
        position: relative;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        margin: 5px 4px;

        .image {
          position: relative;
          width: 100%;

          .title {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 3px;
            color: #fff;
            background-color: rgba(31, 41, 55, 0.5);
            width: 100%;
            height: 28px;
          }
        }

        .btn-wrap {
          display: flex;
          justify-content: center;
          width: 100%;
          background-color: #fff;
          padding: 8px;

          ::v-deep .el-button {
            padding: 2px 10px;

            &:hover {
              background-color: #ecf5ff;
            }

            span {
              font-size: 12px;

            }
          }

        }
      }
    }

  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

}
</style>
